import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {Avatar, List, message, Pagination, Skeleton, Typography} from "antd";
import * as numeral from "numeral";
import {getGetApiInfoList} from "@/services/api_info/jiekoumokuai";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */

const Welcome: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState<number>(0);
  const [list, setList] = useState<any[]>([]);
  const loadData = async(current = 1,pageSize  = 5) => {
    setLoading(true)
    try {
      const res = await getGetApiInfoList({
        current: current,
        pageSize: pageSize
      })
      setList(res?.data?.list ?? [])
      setTotal(res?.data?.total ?? 0)
    } catch (err :any){
      message.error('请求失败，' + err.message);
    }
    setLoading(false)
  }
  useEffect(() => {
    loadData()
  },[])
  return (
    <PageContainer
    title= "在线接口调用平台"
    >
      <List
        className="demo-loadmore-list"
        itemLayout="horizontal"
        loading={loading}
        dataSource={list}
        renderItem={(item) => {
          const apiLink = "/interface_info/" + item.ID
          return (
            <List.Item
              actions={[<a href={apiLink} key={item.id}>查看</a>]}
            >
              <List.Item.Meta
                title={<a href={apiLink}>{item.name}</a>}
                description={item.description}
              />
            </List.Item>
          )
        }}
        pagination={{
          showTotal(total:number) {
            return '总数：' + total
          },
          pageSize:5,
          total,
          onChange(page,pageSize) {
            loadData(page, pageSize)
          },
        }}
      />

    </PageContainer>
  );
};

export default Welcome;
